import {Button, Flex, Form, Input, Typography} from "antd";
import {Link} from "react-router";
import {useDispatch, useSelector} from 'react-redux';
import {saveToLocalStorage} from "../redux/localStorage.js";
import store from "../redux/store.js";

const cardStyle = {
    backgroundColor: '#fff',
    textAlign: 'center',
    padding: '0 50px',
    width: '400px',
}

const layoutStyle = {
    overflow: 'hidden',
    width: '100%',
    minHeight: '100vh',
    background: '#F0F2F5',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
};

const Login = () => {
    const dispatch = useDispatch();
    const onFinish = (values) => {
        const loginUserData = {
            username: values.username,
            password: values.password,
        };

        dispatch({
            type:'LOGIN_USER_DATA',
            payload:loginUserData,
        })
        saveToLocalStorage('loginUserData',store.getState());
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const loginUserData = useSelector((state) => state.loginUserData)
    console.log(JSON.stringify(loginUserData))

    return (
        <div style={layoutStyle}>
            <Form
                name="basic"
                style={cardStyle}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item>
                    <Typography.Title style={{color:"#717171"}} level={4}>登录</Typography.Title>
                </Form.Item>
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: '用户名由数字和英文字母(不区分大小写)组成，不超过6个字符',
                            pattern: /^[a-zA-Z0-9]{1,6}$/,
                        }
                    ]}
                >
                    <Input placeholder="请输入用户名！" />
                </Form.Item>

                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符；',
                            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/,

                        },
                    ]}
                >
                    <Input.Password placeholder="请输入密码" />
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" style={{width:'100%'}}>
                        登录
                    </Button>
                </Form.Item>
                <Form.Item>
                    <Flex justify="space-between" align="center">
                        <Link to="../forgetpassword">忘记密码</Link>
                        <p>没用账户？<Link to="../register">现在注册</Link></p>
                    </Flex>
                </Form.Item>
            </Form>
        </div>
    );
}

export default Login;